.flex {
  //items inside a flexRow will automatically be evenly spaced.
  //Usually the children should be divs with no other classes.
  //Flexrows can be nexted inside each other
  display: flex;
  align-items: flex-start;
  width: 100%; //if the element has absolute or fixed positioning, expand it
  box-sizing: border-box;
  flex-direction: row; //align children left to right horizontally

  & > * {
    flex: 0 1 auto; // children won't grow, but will shrink
    min-width: 0; // prevent children with long text from causing an overflow

    hr {
      width: 100%; // prevent rules from being 0 width
    }
  }

  &.reverse {
    flex-direction: row-reverse; //right to left
  }

  //use the flush sides class if the children set their own margins and padding
  //use a gutter class from _containers if the container should set the margins

  &.flexFlushSides > *:first-child {
    padding-left: 0;
    margin-left: 0;
  }

  &.flexFlushSides > *:last-child {
    padding-right: 0;
    margin-right: 0;
  }
}

//colums and rows

.flexRow {
  @extend .flex;
  //use this to contain columns
  align-items: stretch; //this stretches the items to 100% height
}

.flexInline {
  @extend .flex;
  // use for inline flex elements
  display: inline-flex;
  width: auto;
}

.snip,
.snipKids > * {
  //truncate the text in the child elements
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rowDivV {
  //a vertical divider. Use when you need to separate things without adding a border to one of them
  //use a color class for the background color
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
}

.rowDivH {
  //a horizontal divider. Use when you need to separate vertical elements without adding a border to one of them
  //use a color class for the background color
  height:1px;
  width: 100%;
}

.flexCol {
  //use the flex col if you need a vertical stack of elements that wants to take advantage of flex positioning
  //if you don't need flex positioning, a vertical stack should have a simple wrapping div
  //you can also use flexCol to flip the order of the items in it without rewriting all the child elements
  @extend .flex;
  flex-direction: column; //align children from top to bottom vertically

  &.reverse {
    flex-direction: column-reverse;
  }

  //use the flush sides class if the children set their own margins and padding
  //use a gutter class from _containers if the container should set the margins

  &.flexFlushSides > *:first-child {
    padding-top: 0;
    margin-top: 0;
  }

  &.flexFlushSides > *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.flexColWide {
  // a vertical flex column with 100% wide rows
  @extend .flexCol;

  & > * {
    width: 100%;
    box-sizing: border-box;
  }
}

.flexColRows {
  //vertical colums that have 100% width and are spaced across the height
  @extend .flexColWide;
  justify-content: space-between;
  height: 100%;
}

.flexCent {
  //creates a container with centered children
  @extend .flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.flexVCent {
  //creates a container with vertically centered children
  @extend .flex;
  height: 100%;
  align-items: center;

  input[type="checkbox"] + label {
    align-items: center;
  }
}

.flexVCentClearMarg {
  // removes any vertical margins. Useful for centering headlines with other elements.
  @extend .flexVCent;

  & > * {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.flexVBot {
  //creates a container with children aligned to the bottom of the parent
  @extend .flex;
  height: 100%;
  align-items: flex-end;
}

.flexVBase {
  //creates a container with children aligned to the baseline of the parent. Useful for aligning with text.
  @extend .flex;
  height: 100%;
  align-items: baseline;
}

.flexHCent {
  //creates a container with horizontally centered children
  @extend .flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flexHRight {
  //creates a container with children aligned to the right
  @extend .flex;
  justify-content: flex-end;
  text-align: right;
}

.center {
  // Creates a container with content vertically and horizontally
  // center. Requires the parent to have a non-static positioning.
  @include center();
}

.simpleFlexCol {
  display: flex;
  flex-direction: column;
}

.flexExpand,           //make a flex element expand to fill the remaining space
.flexKidsExpand > * {  //make all child elements expand
  flex-grow: 1;
}

.flexNoShrink {
  //stop a flex element from shrinking if it's content isn't big enough
  flex-shrink: 0;
}

.flexItemLeft {
  //use on a flex child to set it to align left if the parent doesn't
  align-self: center;
}

.flexItemCenter {
  //use on a flex child to set contents to vertically center if the parent doesn't
  align-self: center;
}

.col {
  //use .col for a column that will adapt to the number of siblings present. 3 col elements will each be 1/3 of the width of the row.
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto; //do not shrink or grow columns
}

.col12 {
  @extend .col;
  flex-basis: 100%;
  width: 100%;
}

.col11 {
  @extend .col;
  flex-basis: 91.66666666666666%;
  width: 91.66666666666666%;
}

.col10 {
  @extend .col;
  flex-basis: 83.33333333333334%;
  width: 83.33333333333334%;
}

.col9 {
  @extend .col;
  flex-basis: 75%;
  width: 75%;
}

.col8 {
  @extend .col;
  flex-basis: 66.66666666666666%;
  width: 66.66666666666666%;
}

.col7 {
  @extend .col;
  flex-basis: 58.333333333333336%;
  width: 58.333333333333336%;
}

.col6 {
  @extend .col;
  flex-basis: 50%;
  width: 50%;
}

.col5 {
  @extend .col;
  flex-basis: 41.66666666666667%;
  width: 41.66666666666667%;
}

.col4 {
  @extend .col;
  flex-basis: 33.33333333333333%;
  width: 33.33333333333333%;
}

.col3 {
  @extend .col;
  flex-basis: 25%;
  width: 25%;
}

.col2 {
  @extend .col;
  flex-basis: 16.666666666666664%;
  width: 16.666666666666664%;
}

.col1 {
  @extend .col;
  flex-basis: 8.333333333333332%;
  width: 8.333333333333332%;
}

//containers should have one of the standard padding sizes
//padKids classes go on wrapper elements, to make all direct children have that padding

.padTn,
.padTnKids > * {
  padding: $padTn;
}

.padSm,
.padSmKids > * {
  padding: $padSm;
}

.pad,
.padKids > * {
  padding: $pad;
}

.padMd,
.padMdKids > * {
  padding: $padMd;
}

.padMd2,
.padMd2Kids > * {
  padding: $padMd2;
}


.padLg,
.padLgKids > * {
  padding: $padLg;
}

.padHg,
.padHgKids > * {
  padding: $padHg;
}

.padGi,
.padGiKids > * {
  padding: $padGi;
}

.padStack > *:not(:last-child) {
  //use if the children should collapse the padding between them
  padding-bottom: 0;
}
//elements should have standard spacing between them vertically. There shouldn't be more than a few row classes.

.padStackAll > * {
  //like padStack, but even the last child will collapse
  padding-bottom: 0;
}

#ov1 .pad0 {
  padding: 0;
}

#ov1 .padTop0 {
  padding-top: 0;
}

#ov1 .padBot0 {
  padding-bottom: 0;
}

.rowTn {
  margin-bottom: $padTn;
}

.rowSm {
  margin-bottom: $padSm;

}
.row {
  margin-bottom: $pad;
}

.rowMd {
  margin-bottom: $padMd;
}

.rowLg {
  margin-bottom: $padLg;
}

.rowHg {
  margin-bottom: $padHg;
}

.rowGi {
  margin-bottom: $padGi;
}

.margRTn {
  margin-right: $padTn;
}

.margRSm {
  margin-right: $padSm;
}

.margR {
  margin-right: $pad;
}

.margRMd {
  margin-right: $padMd;
}

.margLSm {
  margin-left: $padSm;
}

.margL {
  margin-left: $pad;
}

.margLTxt {
  margin-left: 0.333em; // equivalent to a space character
}

.margRTxt {
  margin-right: 0.333em; // equivalent to a space character
}

#ov1 .marginTopAuto {
  margin-top: auto;

  & + .select2-container {
    margin-top: auto;
  }
}

#ov1 .marginLAuto {
  margin-left: auto;

  & + .select2-container {
    margin-left: auto;
  }
}

@mixin colHGutter($colPad) {
  &.col, &.col12, &.col11, &.col10, &.col9, &.col8, &.col7,
  &.col6, &.col5, &.col4, &.col3, &.col2, &.col1 {
    margin-right: 0;
    padding-left: $colPad / 2;
    padding-right: $colPad / 2;

    &:first-child {
      padding-left: 0;
    }

    &:last-child:not(:only-child) {
      padding-right: 0;
    }
  }
}

.gutterHFlush {
  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }
}

.gutterHTn > * {
  @extend .gutterHFlush;
  margin-right: $padTn;
  @include colHGutter($padTn);
}

.gutterHSm > * {
  @extend .gutterHFlush;
  margin-right: $padSm;
  @include colHGutter($padSm);
}

.gutterH > * {
  @extend .gutterHFlush;
  margin-right: $pad;
  @include colHGutter($pad);
}

.gutterHMd > * {
  @extend .gutterHFlush;
  margin-right: $padMd;
  @include colHGutter($padMd);
}

.gutterHLg > * {
  @extend .gutterHFlush;
  margin-right: $padLg;
  @include colHGutter($padLg);
}

.gutterVFlush {
  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.gutterVTn > * {
  @extend .gutterVFlush;
  margin-bottom: $padTn;
}

.gutterVSm > * {
  @extend .gutterVFlush;
  margin-bottom: $padSm;
}

.gutterV > * {
  @extend .gutterVFlush;
  margin-bottom: $pad;
}

.gutterVMd > * {
  @extend .gutterVFlush;
  margin-bottom: $padMd;
}

.gutterVMd2 > * {
  @extend .gutterVFlush;
  margin-bottom: $padMd2;
}

.gutterVLg > * {
  @extend .gutterVFlush;
  margin-bottom: $padLg;
}

.floR {
  float: right;
}

.floL {
  float: left;
}

.posA {
  position: absolute;
}

.posR {
  position: relative;
}

.posF {
  position: fixed;
}

.width100 {
  width: 100%;
}

